import bb.cascades 1.2
import bb.WebImageView 1.4

Container {
    id: subItem
    property alias thumbnail: m_webImg.url
    property alias title: m_title.text
    property alias itemIndex: m_itemindex.text
    property alias width: m_webImg.preferredWidth
    property alias height: m_webImg.preferredHeight
    
    layout: DockLayout {
    }

    Container {
        WebImageView {
            id: m_webImg
            scalingMethod: ScalingMethod.AspectFit
            preferredWidth:0
        }
        
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
    }
    
    Container {
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Bottom
        preferredWidth: width
        preferredHeight: 60
        background: Color.Black
        opacity: 0.4
    }

    Container {
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Bottom
        preferredHeight: 60
        preferredWidth: width
        
        layout: DockLayout {
        }
        
        Container {
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Left
            Label {
                id: m_title
                textStyle.base: SystemDefaults.TextStyles.BodyText
                textStyle.color: Color.White
            }
        }
        Container {
            horizontalAlignment: HorizontalAlignment.Right
            verticalAlignment: VerticalAlignment.Center
            Label {
                id: m_itemindex
                textStyle.base: SystemDefaults.TextStyles.BodyText
                textStyle.color: Color.White
            }
        }
    }
}
